<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<% String path = request.getContextPath();%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>等你回家</title>

    <link href="<%=path%>/web/index/css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="<%=path %>/web/index/css/style.css" rel="stylesheet" type="text/css" media="all"/>

    <link href="<%=path%>/web/index/css/base.css" rel="stylesheet">
    <link href="<%=path%>/web/index/css/index.css" rel="stylesheet">
    <link href="<%=path%>/web/index/css/task.css" rel="stylesheet">
    <link href="<%=path %>/web/static/css/blog-detail.css" rel="stylesheet">
</head>

<body style="background: #f7f7f7">
<div class="banner-in">
    <div class="container">
        <h6><img src="${pageContext.request.contextPath}/web/uploadImages/${journal.userinfo.pic}">
            <div>${journal.userinfo.username}的日志</div>
        </h6>
    </div>
</div>
<!--header-->
<div class="header">
    <div class="container">
        <div class="logo">
            <a href="index.html"><img src="<%=path %>/web/index/images/logo.png" alt=" "/></a>
        </div>
        <div class="top-nav">
            <span class="menu"> </span>
            <ul>
                <li ><a href="${pageContext.request.contextPath}/web/index" class="scroll">首页</a></li>
                <li><a href="<%=path %>/web/information/chooseType" class="scroll">你在哪儿</a></li>
                <li><a href="<%=path %>/web/information/informationList?lostTypeId=0" class="scroll">我想回家</a></li>
                <li class="active"><a href="<%=path %>/web/blogger/blog" class="scroll">日志论坛</a></li>
                <li><a href="<%=path %>/web/task/releaseTask" class="scroll">任务列表</a></li>
                <c:if test="${empty(sessionScope.userinfo)}" var="result">
                    <li><a href="<%=path %>/web/userinfo/register" class="scroll">注册</a>|<a href="<%=path %>/web/userinfo/login" class="scroll">登录</a></li>
                </c:if>
                <c:if test="${not result}">
                    <li><a href="<%=path%>/web/userinfo/applyVolunteer" class="scroll">加入我们</a></li>
                    <c:if test="${(sessionScope.userinfo.username eq '')||(sessionScope.userinfo.username eq NULL)}" var="result">
                        <span style="color:white">欢迎<a href="<%=path %>/web/userinfo/index" style="color: white" href="">${sessionScope.userinfo.phone}</a></span>
                    </c:if>
                    <c:if test="${not result}">
                        <span style="color:white">欢迎<a href="<%=path %>/web/userinfo/index" style="color: white" href="">${sessionScope.userinfo.username}</a></span>
                    </c:if>
                    <span style="color: white">|</span>

                    <span style="color:white"><a style="color: white" href="<%=path %>/web/userinfo/logout">注销</a></span>
                    <span style="color: white">|</span>
                    <label><img style="width:30px;height: 30px" src="<%=path %>/web/uploadImages/${sessionScope.userinfo.pic}"></label>
                </c:if>
            </ul>
            <!--script-->
        </div>
        <div class="clearfix"></div>
    </div>
</div>


<article>
    <h1 class="t_nav"><span>您现在的位置是：首页 > 日志列表 > 详情</span></h1>

    <div class="infos">
        <div class="wm-note-date">
            <span><fmt:formatDate value="${requestScope.journal.inputTime}" pattern="y-MM-dd HH:mm:ss"></fmt:formatDate></span>
        </div>
        <div class="blog-title">
            <h3>${requestScope.journal.title}</h3>
            <input type="hidden" value="${requestScope.journal.id}" class="ids">
            <p>
                <i class="fa fa-user"><img src="<%=path%>/web/static/img/user.png"></i> <a href="/note/wang/home">${requestScope.journal.userinfo.username}</a>
            </p>
            <p title="浏览数">
                <i class="fa fa-eye"><img src="<%=path%>/web/static/img/newsbg.jpg"></i>
                <span> (${requestScope.journal.browseCount}) </span>
            </p>
            <p title="评论数">
                <i class="fa fa-commenting-o"><img src="<%=path%>/web/static/img/newsbg.png"/></i>
                <span>(${requestScope.journal.commentCount})</span>
            </p>
            <p title="点赞数" class="open-icon wm-like" data-type="content_note">
                <a class="dianzan"><i class="fa fa-thumbs-o-up"><img src="<%=path%>/web/static/img/heart.png"></i></a>
                (<span id="aaa">${requestScope.journal.likeCount}</span>)
            </p>
        </div>
        <c:if test="${not empty requestScope.journal.pics}">
            <div class="single-blog-item-img" style="width:500px;margin: auto">
                <img style="width: 100%" src="<%=path %>/web/userinfo/img/journalImages/${requestScope.journal.pics}" alt="blog">
            </div>
        </c:if>
        <div class="blog-content">
            <div>
                <p>${requestScope.journal.info}</p>
            </div>
        </div>
        <div style="margin-left: 15px;" class="news_pl">
            <h5>我要评论:</h5>
            <br/>
            <form>
                <textarea style="width:85%; height: 40px;float: left;" placeholder="写下你的评论..." class="bianxie"></textarea>
                <input type="button" style="border: none;background: #666;color: #FFF;width: 13%;height: 40px; " value="发布" class="fabu"/>
            </form>

            <ul class="wm-comment-list">
                <li>
                    <div class="single-work-history">
                        <div class="single-candidate-list" style="border: 1px solid #e8ecec;border-radius:5px; width:98%;margin-top: 20px;">
                            <div class="main-comment" style="padding: 0px 10px 0px 40px;font-weight: normal !important;margin-top: 10px;margin-left: -20px;">
                                <div class="tianxie">

                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    </div>
    </div>
    <div style="margin-left: 55px;" class="col-md-3">
        <div class="store-right">
            <h6 class="Task"><a href="${pageContext.request.contextPath}/web/blogger/fabu">发表日志</a></h6>
        </div>
        <div class="store-right" style="margin-top:30px">
            <h6>今日最热</h6>
            <ul class="store-men">
                <c:forEach begin="0" end="4" var="i">
                    <li><a href="${pageContext.request.contextPath}/web/blogger/blogs?id=${requestScope.journals[i].id}"><span> </span>${requestScope.journals[i].title}
                    </a></li>
                </c:forEach>
            </ul>
        </div>
    </div>
</article>
<footer>
    <div class="footer" >
        <div class="container" >
            <p style="font-size: 15px;"><span style="font-size: 20px;">等你回家</span><span>邮箱:1111111@163.com</span>
                电话:0532—85025005</p>
            <p class="footer-class" style="font-size:15px;margin-top: -10px">地址:山东省青岛市市南区中联创意广场B1栋三楼 <a
                    href="http://w3layouts.com/" target="_blank">万码学堂</a></p>
            <p class="footer-class" style="font-size:15px;margin-top: -30px;text-transform: none">Copyright © 2019
                www.dengnihuijia.com All rights Reserved.</p>
        </div>
    </div>
</footer>
<script src="<%=path%>/web/static/js/modules/jquery-3.4.1.min.js"></script>
</body>
</html>
<script>
    $(function () {
        init(1);//评论查询初始化
        $(".fabu").click(function () {    //添加评论
            var text = $(".bianxie").val();
            var rzid = $(".ids").val();
            var action = "${pageContext.request.contextPath}/comment/remark";
            $.get(action, {text: text, rzid: rzid}, function () {
                init();
                alert("发布成功")
            })
        })
        $(".dianzan").click(function () {
            var id = $(".ids").val();
            var spanNumber = $("#aaa").html();
            var action = "${pageContext.request.contextPath}/web/blogger/addLike";
            $.get(action, {id: id}, function (mes) {
                if (mes == "ok") {
                    $("#aaa").empty();
                    $("#aaa").html(parseInt(spanNumber) + 1)
                } else {
                    alert("对不起,不能重复点赞!")
                }
            })
        })
    })
    function init(pageNum) {  //一级评论初始化方法
        $.get("${pageContext.request.contextPath}/comment/listAll", {
            id:${requestScope.journal.id},
            pageNum: pageNum
        }, function (mes) {
            $(".tianxie").empty();
            $(".tianxie").html(mes);
        })
    }
    $(".tianxie").on("click", ".pinglunfenye a", function () { //给页码加点击事件
        var pageNum = $(this).data("id");
        init(pageNum);
        return false;
    })


</script>
